<template>
  <Dialog v-model="dialogVisible" title="异议处理时间线" width="800px">
    <div v-loading="loading">
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in timelineData"
          :key="index"
          :timestamp="item.timestamp"
          :type="item.type"
          :icon="item.icon"
          placement="top"
        >
          <el-card>
            <div class="timeline-content">
              <h4>{{ item.title }}</h4>
              <p class="description">{{ item.description }}</p>
              <div v-if="item.details" class="details">
                <div v-for="(detail, key) in item.details" :key="key" class="detail-item">
                  <span class="detail-label">{{ key }}：</span>
                  <span class="detail-value">{{ detail }}</span>
                </div>
              </div>
              <div v-if="item.operator" class="operator">
                <el-tag size="small">{{ item.operator }}</el-tag>
              </div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      
      <div v-if="timelineData.length === 0" class="empty-state">
        <el-empty description="暂无时间线数据" />
      </div>
    </div>
    
    <template #footer>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'

defineOptions({ name: 'ObjectionTimeline' })

const dialogVisible = ref(false)
const loading = ref(false)
const timelineData = ref([])

/** 打开弹窗 */
const open = async (objectionId: number) => {
  dialogVisible.value = true
  await loadTimelineData(objectionId)
}

/** 加载时间线数据 */
const loadTimelineData = async (objectionId: number) => {
  try {
    loading.value = true
    
    // TODO: 调用获取异议处理时间线的API
    // const data = await getObjectionTimeline(objectionId)
    
    // 模拟数据
    timelineData.value = [
      {
        timestamp: '2024-01-15 09:00:00',
        title: '异议提交',
        description: '申请人提交成绩异议申请',
        type: 'primary',
        icon: 'Upload',
        operator: '张三',
        details: {
          '异议类型': '成绩异议',
          '异议原因': '认为实操考核评分有误',
          '联系方式': '138****1234'
        }
      },
      {
        timestamp: '2024-01-15 10:30:00',
        title: '异议受理',
        description: '管理员受理异议申请，分配处理人员',
        type: 'success',
        icon: 'Check',
        operator: '李四',
        details: {
          '受理编号': 'YY202401150001',
          '处理人员': '王五',
          '预计处理时间': '3个工作日'
        }
      },
      {
        timestamp: '2024-01-16 14:20:00',
        title: '调查开始',
        description: '成立调查小组，开始调查异议内容',
        type: 'warning',
        icon: 'Search',
        operator: '王五',
        details: {
          '调查小组': '王五、赵六、孙七',
          '调查内容': '重新审核实操考核评分过程',
          '调查方式': '查阅考核录像、访谈考评员'
        }
      },
      {
        timestamp: '2024-01-17 16:45:00',
        title: '调查完成',
        description: '调查小组完成调查，形成调查报告',
        type: 'info',
        icon: 'Document',
        operator: '王五',
        details: {
          '调查结论': '原评分无误',
          '调查依据': '考核录像显示评分过程规范，评分标准执行正确',
          '建议处理': '驳回异议申请'
        }
      },
      {
        timestamp: '2024-01-18 09:15:00',
        title: '异议处理完成',
        description: '根据调查结果，正式处理异议申请',
        type: 'success',
        icon: 'CircleCheck',
        operator: '李四',
        details: {
          '处理结果': '异议不成立',
          '处理依据': '调查显示原评分过程规范，结果准确',
          '申诉渠道': '如不服处理结果，可在5个工作日内向上级部门申诉'
        }
      }
    ]
  } catch (error) {
    console.error('加载时间线数据失败:', error)
  } finally {
    loading.value = false
  }
}

defineExpose({ open })
</script>

<style scoped>
.timeline-content {
  padding: 10px 0;
}

.timeline-content h4 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.description {
  margin: 0 0 12px 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

.details {
  margin: 12px 0;
  padding: 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.detail-item {
  display: flex;
  margin-bottom: 6px;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-label {
  min-width: 80px;
  color: #909399;
  font-size: 13px;
}

.detail-value {
  color: #606266;
  font-size: 13px;
  flex: 1;
}

.operator {
  margin-top: 12px;
  text-align: right;
}

.empty-state {
  text-align: center;
  padding: 40px 0;
}

:deep(.el-timeline-item__timestamp) {
  font-size: 12px;
  color: #909399;
}
</style>
